<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="success" plain @click="exportData">导出数据</el-button>
      <el-button type="primary" plain @click="editFormVisible = true">导入数据</el-button>
    </el-col>

    <!--列表-->
    <el-table :data="dicts" v-loading="listLoading" lazy border row-key="id" :load="load" highlight-current-row
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%">
      <el-table-column prop="name" label="名称" width="290">
      </el-table-column>
      <el-table-column prop="id" label="数据ID" width="200">
      </el-table-column>
      <el-table-column prop="dictCode" label="编码" width="250">
      </el-table-column>
      <el-table-column prop="value" label="值" width="230">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="270" sortable>
      </el-table-column>
      <!-- <el-table-column label="操作" width="200">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)" title="编辑"><i class="el-icon-edit"></i>
          </el-button>
          <el-button type="danger" size="small" title="删除" @click="handleDel(scope.$index, scope.row)"><i
              class="el-icon-delete"></i></el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <!--上传界面-->
    <el-dialog title="数据导入" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-upload class="upload-demo" :action="'http://localhost:8202/admin/cmn/dict/importData'" :multiple="false"
        :on-success="onUploadSuccess">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传后缀为(.xlsx)文件</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
import apiObj from '../../api/dict/list'

export default {
  data () {
    return {
      dicts: [],
      listLoading: false,
      editFormVisible: false,//上传界面是否显示
    }
  },
  methods: {
    //获取数据字典列表
    getDicts (id) {
      this.listLoading = true
      apiObj.getDicts(id).then(({ data }) => {
        this.dicts = data.data
        this.listLoading = false
      }).catch(e => {
        this.$message.error("加载错误")
      })
    },
    // 查看子节点时触发的方法
    load (tree, treeNode, resolve) {
      apiObj.getDicts(tree.id).then(({ data }) => {
        // 这个函数里面放返回的数据
        resolve(data.data)
      }).catch(e => {
        this.$message.error("加载失败")
      })
    },
    // 导出数据字典的方法
    exportData () {
      this.$confirm('是否要导出数据到Excel表中?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '正在导出，请稍后!'
        })
        apiObj.exportData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出'
        })
      })
    },

    // 上传成功后的钩子函数
    onUploadSuccess (response, file, fileList) {
      this.$message({
        message: '导入数据成功!',
        type: 'success'
      })
      this.editFormVisible = false
      this.getDicts(1)
    },
  },
  created () {
    this.getDicts(1)
  }
}

</script>

<style>
</style>